<template>
	<div class="School">
		<!-- 头部 -->
		<Header :navActive="3" ref="Header"/>
		<!-- 主内容区 -->
		<div class="main w1200 cl">
			<!-- 搜索框 -->
			<div class="searchBox">
				<div class="search">
					<div class="inputBox fl"><input type="text" v-model="searchVal" autocomplete="off" placeholder="请输入职位名称或企业名称"/></div>
					<el-button type="primary" class="btn fr" @click="search">搜索</el-button>
				</div>
				<div class="hot">
					<div class="label">热搜词：</div>
					<router-link :to="{name:'Job',query:{search:item.title}}" class="item" v-for="(item,index) in hot" :key="index">{{item.title}}</router-link>
				</div>
			</div>
			<!-- 菜单和banner -->
			<div class="menuBanner cl">
				<div class="menu fl">
					<div class="menuTabs">
						<div class="item" :class="menuTabsActive==0?'active':''" @click="menuTabsActive=0">专业检索</div>
						<div class="item" :class="menuTabsActive==1?'active':''" @click="menuTabsActive=1">职位检索</div>
					</div>
					<ul class="menuNav" v-if="menuTabsActive==0">
						<li class="menuItem" v-for="(item,index) in menuList" :key="index">
							<div class="liTitle">{{item.name}} <span v-if="item.children&&item.children[0].name"><router-link :to="{name:'Job',query:{search:item.children[0].name,majorId:item.children[0].id,recruitType:1}}" target="_blank">{{item.children[0].name}}</router-link></span></div>
							<div class="liSub">
								<div class="subTitle">{{item.name}}</div>
								<ul class="subList">
									<router-link class="subItem" :to="{name:'Job',query:{search:x.name,majorId:item.children[0].id,recruitType:1}}" v-for="(x,y) in item.children" :key="y">{{x.name}}</router-link>
								</ul>
							</div>
						</li>
					</ul>
					<ul class="menuNav" v-if="menuTabsActive==1">
						<li class="menuItem" v-for="(item,index) in menuList1" :key="index">
							<div class="liTitle">{{item.name}}</div>
							<div class="liSub">
								<div class="subTitle">{{item.name}}</div>
								<ul class="subList">
									<router-link class="subItem" :to="{name:'Job',query:{search:x.name,recruitType:1}}" v-for="(x,y) in item.children" :key="y">{{x.name}}</router-link>
								</ul>
							</div>
						</li>
					</ul>
				</div>
				<div class="banner fl">
					<el-carousel trigger="click" height="420px" :interval='5000'>
						<el-carousel-item v-for="(item,index) in banner" :key="index">
							<template v-if="item.redirect">
								<a :href="item.redirect" :target="item.open?'_blank':''"><img :src="item.image_dictText"></a>
							</template>
							<template v-else>
								<img :src="item.image_dictText">
							</template>
						</el-carousel-item>
					</el-carousel>
				</div>
			</div>
			<!-- 专场招聘会 -->
			<div class="block block1 cl">
				<div class="bigTitle">专场招聘会 <router-link :to="{name:'Special'}" class="more">更多<i class="el-icon-arrow-right"></i></router-link></div>
				<div class="list">
					<router-link :to="{name:'SpecialIndex',query:{id:item.id}}" target="_blank" class="item" v-for="(item,index) in specialList" :key="index">
						<div class="img"><img :src="item.imageFileId_dictText"></div>
						<div class="text">
							<p>名称：{{item.title}}</p>
							<p>时间：{{item.startTime}} - {{item.endTime}}</p>
							<div class="state state0" v-if="item.state==0">待开始</div>
							<div class="state state1" v-if="item.state==1">进行中</div>
							<div class="state state2" v-if="item.state==2">已结束</div>
						</div>
					</router-link>
				</div>
			</div>
			<!-- 推荐企业 -->
			<div class="block block2 cl">
				<div class="bigTitle">推荐企业</div>
				<div class="list cl">
					<router-link :to="{name:'Company',query:{id:item.sourceId}}" target="_blank" class="item" v-for="(item,index) in entList" :key="index">
						<div class="logo"><img :src="item.image_dictText"></div>
						<div class="name">{{item.name}}</div>
						<div class="type">{{item.enTrade_dictText}}</div>
						<!-- <div class="job">
							<div class="jItem fl">
								<div class="val">{{item.socialRecruitment}}</div>
								<p>社招职位</p>
							</div>
							<div class="jItem fr">
								<div class="val">{{item.campusRecruitment}}</div>
								<p>校招职位</p>
							</div>
						</div> -->
					</router-link>
				</div>
			</div>
		</div>
		<!-- 底部 -->
		<Footer />
	</div>
</template>

<script>

	import {baseData,block,specialList2} from '@/api/api'
	import Header from '@/components/Header.vue'
	import Footer from '@/components/Footer.vue'
	export default {
		//组件注入
		components: {Header,Footer},
		//存放数据
		data() {
			return {
				menuTabsActive:0,
				searchVal:'',//搜索内容
				hot:[],//热门搜索
				entList:[],//热门企业
                type:'全职',//全职实习
				menuList:[
					{children:[{name:''}]}
				],//专业检索
				menuList1:[],//职业检索
				banner:[],
				specialList:[],//专场
			}
		},
		//接受父组件传递的值
        props:[],
		//监控data中的数据变化
		watch: {},
		//方法集合
		methods: {
			//搜索
			search(){
				this.$router.push({name:'Job',query:{search:this.searchVal,recruitType:1}})
			},
		},
		//生命周期 - 创建完成（可以访问当前this实例）
		created() {
			document.body.scrollTop = 0
			document.documentElement.scrollTop = 0
		},
		//生命周期 - 挂载完成（可以访问DOM元素）
		mounted() {
			//热门搜索
			block({
				'code':'common_hot_search'
			}).then(res =>{
				if(res.code==200){
					this.hot = res.result.blockData
				}
			});
			//banner
			block({
				'code':'campus_banner'
			}).then(res =>{
				if(res.code==200){
					this.banner = res.result.blockData
				}
			});
			//专业检索
            block({
                'code':'b-index-tree-major'
            }).then(res =>{
                if(res.code==200){
                    this.menuList = res.result.children.slice(0,8)
                }
			});
			//职位检索
            block({
                'code':'b-index-tree-job'
            }).then(res =>{
                if(res.code==200){
                    this.menuList1 = res.result.children.slice(0,8)
                }
			});
			//专场
			block({
				'code':'campus_zc'
			}).then(res =>{
				if(200==res.code){
					let bDataList = res.result.blockData.slice(0,4);
					let specailIds = "";
					for (let i=0;i<bDataList.length;i++) {
						let element = bDataList[i];
						specailIds += element.sourceId+",";
					}
					if(specailIds){
						//专场 由于接口不支持多个id查询，暂时
						specialList2({
							'id':specailIds
						}).then(res =>{
							if(200==res.code){
								let list = res.result.records;
								for(let i in list){
									let nowDate = new Date().getTime()
									let itemDate1 = new Date(list[i].startTime).getTime()
									let itemDate2 = new Date(list[i].endTime).getTime()
									if(nowDate>itemDate1&&nowDate<itemDate2){
										list[i].state = 1
									}else if(nowDate>itemDate2){
										list[i].state = 2
									}else{
										list[i].state = 0
									}
									list[i].startTime = list[i].startTime.split(' ')[0].replace(/\-/g,".");
									list[i].endTime = list[i].endTime.split(' ')[0].replace(/\-/g,".");
								}
								//this.specialList = list.slice(0,4);
								this.specialList =this.$imgResizes(list.slice(0,4),'390x101','imageFileId_dictText');
							}
						});
					}
				}
			});
			//热门企业
			block({
				'code':'campus_recommond_enterprise'
			}).then(res =>{
				if(200==res.code){
					this.entList = res.result.blockData.slice(0,5);
				}
			});
		}
   };
</script>
<style lang="scss">
	@mixin text-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
	@mixin text-ellipsisclamp($clamp){display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: $clamp;overflow: hidden;}
	@mixin transition{transition: all .3s;}
	.School{background: #F6F6F6;
		.main{height: auto;padding-bottom: 145px;position: relative;z-index: 0;
			/* 搜索 */
			.searchBox{width: 1000px;height: auto;overflow: hidden;margin: 30px auto;
				.search{height: 55px;background: #fff;position: relative;
					.type{float: left;position: relative;z-index: 1;top: 2px;left: 2px;
						.el-select{width: 120px;}
						.el-input__inner{width: 120px;border: 0;height: 51px;line-height: 51px;font-size: 16px;padding: 0 30px;color: #525252;
							&::-webkit-input-placeholder{color: #525252;}
						}
					}
					.inputBox{width: 825px;position: relative;z-index: 1;top: 2px;
						input{width: 100%;height: 51px;line-height: 51px;font-size: 16px;padding: 0 20px;}
					}
					.btn{width: 175px;height: 55px;line-height: 55px;font-size: 16px;color: #fff;font-weight: bold;text-align: center;@include transition();position: absolute;right: 0;top: 0;z-index: 1;}
					&:before{content: "";width: 100%;height: 100%;border:2px solid #E54437;position: absolute;left: 0;top: 0;z-index: 0;}
					&:after{content: "";width: 1px;height: 18px;background: #eee;position: absolute;left: 135px;top: 19px;}
				}
				.hot{height: auto;overflow: hidden;margin: 10px 0 0 0;
					.label{font-size: 14px;color: #999;float: left;line-height: 20px;}
					.item{font-size: 14px;color: #666;float: left;margin-left: 15px;line-height: 20px;
						&:hover{color: #E54437;}
						&:first-of-type{margin-left: 5px;}
					}
				}
			}
			/* 菜单和banner */
			.menuBanner{height: auto;
				.menu{width: 240px;height: 420px;background: #fff;color: #333;position: relative;z-index: 1002;box-shadow: 0px 3px 8px rgba(190, 190, 190, 0.26);
					.menuTabs{height: auto;overflow: hidden;
						.item{width: 50%;height: 50px;line-height: 50px;float: left;background: #f6f6f6;font-size: 15px;color: #999;text-align: center;cursor: pointer;
							&.active{color: #333;font-weight: bold;background: #fff;}
						}
					}
					.menuNav{height: auto;padding: 10px 0;
						.menuItem{
							.liTitle{height: 43px;line-height: 43px;font-size: 16px;color: #333;padding: 0 20px;cursor: pointer;
								span{float: right;font-size: 14px;
									a{color: #999;transition: all 0s;}
								}
							}
							.liSub{display: none;min-height: 420px;width: 730px;padding-bottom: 15px;background: #fff;position: absolute;left: 241px;top: 0;box-shadow: 0px 3px 8px rgba(190, 190, 190, 0.26);
								.subTitle{font-size: 16px;font-weight: bold;padding-bottom: 10px;margin: 15px 20px 0;border-bottom: 1px solid #e6e8ec;}
								.subList{height: auto;overflow: hidden;padding: 15px 24px 0;line-height: 32px;
									.subItem{font-size: 14px;color: #666;display: inline-block;width: 25%;cursor: pointer;@include transition();
										&:hover{color: #E54437;}
									}
								}
							}
							&:hover{
								.liTitle{background: #E54437;color: #fff;
									a{color: #fff;}
								}
								.liSub{display: block;}
							}
						}

					}
				}
				.banner{width: 940px;height: 420px;margin-left: 20px;
					img{width: 100%;height: 100%;}
				}
			}
			/* block */
			.block{height: auto;overflow: hidden;margin-top: 50px;
				.bigTitle{height: 26px;line-height: 26px;font-size: 20px;color: #333;font-weight: bold;position: relative;padding-left: 20px;margin-bottom: 20px;
					.more{font-size: 14px;color: #777;float: right;font-weight: normal;
						&:hover{color: #E54437;}
					}
					&:before{content: "";width: 6px;height: 20px;background: #E54437;position: absolute;left: 0;top: 4px;}
				}
				&.block1{overflow: visible;
					.list{width: 1215px;height: auto;
						.item{width: 390px;height: auto;overflow: hidden;float: left;margin-right: 15px;cursor: pointer;@include transition();
							.img{width: 390px;height: 117px;
								img{width: 100%;height: 100%;}
							}
							.text{height: auto;overflow: hidden;background: #fff;padding: 20px;position: relative;
								p{font-size: 14px;color: #666;line-height: 30px;@include text-ellipsis();}
								.state{font-size: 14px;position: absolute;right: 20px;bottom: 26px;
									&.state0{color: #E54437;}
									&.state1{color: #1296DD;}
									&.state2{color: #CCC;}
								}
							}
							&:hover{box-shadow: 5px 5px 20px rgba(0,0,0,.05);transform: translateY(-2px);
								img{opacity: .85;}
							}
						}
					}
				}
				&.block2{overflow: visible;
					.list{width: 1215px;height: auto;
						.item{width: 228px;padding: 20px;overflow: hidden;text-align: center;float: left;margin: 0 15px 15px 0;background: #fff;cursor: pointer;@include transition();
							.logo{width: 188px;height: 81px;margin: 0 auto;
								img{width: 100%;height: 100%;}
							}
							.name{font-size: 16px;color: #333;font-weight: bold;margin-top: 20px;@include text-ellipsis()}
							.type{font-size: 13px;color: #888;line-height: 18px;margin-top: 7px;@include text-ellipsis()}
							.job{height: auto;overflow: hidden;text-align: center;margin-top: 10px;padding-top: 15px;border-top: 1px dashed #f6f6f6;position: relative;
								.jItem{font-size: 14px;padding: 0 5px;
									.val{color: #EC584C;}
									p{color: #666;margin-top: 3px}
								}
								&:before{content: "";width: 1px;height: 30px;background: #f6f6f6;position: absolute;left: 50%;top: 22px;}
							}
							&:hover{box-shadow: 5px 5px 20px rgba(0,0,0,.05);transform: translateY(-2px);}
						}
					}
					.btn{width: 230px;margin: 40px auto 0;display: block;background: none;}
				}
			}
		}
	}
</style>
